<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { Search, VideoPlay, UserFilled } from '@element-plus/icons-vue';
import { liveGetSerachService } from '@/api/live';
import { useRouter } from 'vue-router';
import { userGetSearchService } from '@/api/user';
import { userFollowService, userUnfollowService } from '@/api/follow';

const router = useRouter();
const route = useRoute();
const activeTab = ref('video');
const searchQuery = ref('');
const isLoading = ref(false);

// 模拟搜索结果数据
const videoResults = ref([]);
const liveResults = ref([]);
const userResults = ref([]);

// 模拟数据加载
const loadResults = async () => {
  isLoading.value = true;
  
  if (activeTab.value === 'video') {
    videoResults.value = [
      { id: 1, title: 'Vue3高级技巧与最佳实践', author: '前端开发', likes: '2.4k', duration: '12:45', thumbnail: 'video1' },
      { id: 2, title: '使用Element Plus构建现代UI', author: 'UI设计大师', likes: '1.8k', duration: '08:32', thumbnail: 'video2' },
      { id: 3, title: 'CSS Grid布局完全指南', author: 'CSS专家', likes: '3.1k', duration: '15:22', thumbnail: 'video3' },
      { id: 4, title: 'JavaScript性能优化技巧', author: 'JS高级工程师', likes: '4.5k', duration: '20:18', thumbnail: 'video4' },
      { id: 5, title: '响应式设计实战教程', author: '全栈开发者', likes: '1.2k', duration: '18:06', thumbnail: 'video5' },
      { id: 6, title: 'TypeScript从入门到精通', author: 'TS专家', likes: '3.7k', duration: '25:14', thumbnail: 'video6' },
    ];
  } else if (activeTab.value === 'live') {
    liveResults.value = (await liveGetSerachService(searchQuery.value)).data.data;
  } else {
    userResults.value = (await userGetSearchService(searchQuery.value)).data.data;
  }
    
  isLoading.value = false;
};

// 监听路由变化更新搜索词
watch(
  () => route.query.text,
  () => {
    if (route.query.text) {
      searchQuery.value = route.query.text;
      loadResults();
    }
  },
  { immediate: true }
);

// 监听选项卡变化
watch(activeTab, () => {
  loadResults();
});
</script>

<template>
  <div class="search-container">
    <div class="search-header">
      
      <el-tabs v-model="activeTab" class="search-tabs">
        <el-tab-pane label="视频" name="video">
        </el-tab-pane>
        <el-tab-pane label="直播" name="live">
        </el-tab-pane>
        <el-tab-pane label="用户" name="user">
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <div class="results-container">
      <div v-if="isLoading" class="loading-container">
        <!-- 加载状态 -->
        <div v-for="i in 6" :key="i" class="skeleton-card">
          <div class="skeleton-thumb"></div>
          <div class="skeleton-text"></div>
          <div class="skeleton-text-short"></div>
        </div>
      </div>
      
      <!-- 视频结果 -->
      <div v-if="activeTab === 'video' && !isLoading" class="video-results">
        <div v-for="item in videoResults" :key="item.id" class="video-card">
          <div :class="['thumbnail', `thumbnail-${item.thumbnail}`]">
            <div class="likes">
              <el-icon><svg t="1748762202947" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5519" width="200" height="200"><path d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z" p-id="5520"></path></svg></el-icon>
              {{ item.likes }}
            </div>
            <div class="duration">{{ item.duration }}</div>
          </div>
          <div class="video-info">
            <h3 class="title">{{ item.title }}</h3>
            <div class="author">{{ item.author }}</div>
            <!-- <div class="meta">
              <span>{{ item.views }}次观看</span>
            </div> -->
          </div>
        </div>
      </div>
      
      <!-- 直播结果 -->
      <div v-if="activeTab === 'live' && !isLoading" class="live-results">
        <div v-for="item in liveResults" :key="item.roomId" class="live-card" @click="router.push(`/_live/audience?roomId=${item.roomId}`)">
          <div :class="['live-thumbnail', `live-thumb-${item.thumbnail}`]">
            <el-image class="cover-img" fit="fill" :src="item.coverUrl" />
            <div class="live-badge">直播中</div>
            <div class="viewers">{{ item.viewers }}观看</div>
          </div>
          <div class="live-info">
            <h3 class="title">{{ item.title }}</h3>
            <div class="author">{{ item.anchorName }}</div>
            <div class="tags">
              <el-tag v-for="(tag, index) in item.tags" :key="index" size="small">{{ tag }}</el-tag>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 用户结果 -->
      <div v-if="activeTab === 'user' && !isLoading" class="user-results">
        <div v-for="item in userResults" :key="item.id" class="user-card">
          <div class="avatar">
            <el-avatar :size="60" fit="fill" :src="item.avatarUrl" />
            <el-icon class="verified-badge" color="#409EFF">
              <svg viewBox="0 0 1024 1024"><path d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384l-2.048-2.048-155.648-139.776a38.4 38.4 0 0 0-51.2 57.344l172.8 155.648a38.4 38.4 0 0 0 52.736-1.28l307.2-307.2a38.4 38.4 0 1 0-54.272-54.272L456.192 600.384z" fill="currentColor"></path></svg>
            </el-icon>
          </div>
          <div class="user-info">
            <div class="name">{{ item.name }}</div>
            <div class="followers">{{ item.followers }} 粉丝</div>
            <div class="bio">{{ item.bio }}</div>
          </div>
          <el-button type="primary" plain size="small" @click="(item.isFollowed ? userUnfollowService : userFollowService)(item.id)"><span v-if="item.isFollowed">取消关注</span><span v-else>关注</span></el-button>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="!isLoading && 
          ((activeTab === 'video' && videoResults.length === 0) ||
           (activeTab === 'live' && liveResults.length === 0) ||
           (activeTab === 'user' && userResults.length === 0))" 
          class="empty-state">
        <el-icon :size="60"><Search /></el-icon>
        <h3>没有找到相关结果</h3>
        <p>尝试使用不同的关键词搜索</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  .search-header {
    margin-bottom: 30px;
    
    .search-tabs {
      display: flex;
      justify-content: center;
      
      :deep(.el-tabs__header) {
        margin-bottom: 0;
      }
      
      :deep(.el-tabs__nav) {
        border: none;
      }
      
      :deep(.el-tabs__item) {
        padding: 0 25px;
        height: 50px;
        font-size: 16px;
        font-weight: 500;
        color: #8a8f9d;
        
        &.is-active {
          color: #409EFF;
        }
        
        &:hover {
          color: #66b1ff;
        }
      }
      
      :deep(.el-tabs__active-bar) {
        height: 3px;
        background: linear-gradient(90deg, #409EFF, #66b1ff);
      }
    }
  }
  
  .results-container {
    min-height: 500px;
    
    .loading-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 25px;
      
      .skeleton-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        
        .skeleton-thumb {
          height: 180px;
          background: linear-gradient(90deg, #f0f2f5 25%, #e5e7eb 50%, #f0f2f5 75%);
          background-size: 400% 100%;
          animation: skeleton-loading 1.5s ease infinite;
        }
        
        .skeleton-text {
          height: 20px;
          margin: 15px;
          border-radius: 4px;
          background: linear-gradient(90deg, #f0f2f5 25%, #e5e7eb 50%, #f0f2f5 75%);
          background-size: 400% 100%;
          animation: skeleton-loading 1.5s ease infinite;
        }
        
        .skeleton-text-short {
          height: 16px;
          width: 60%;
          margin: 10px 15px;
          border-radius: 4px;
          background: linear-gradient(90deg, #f0f2f5 25%, #e5e7eb 50%, #f0f2f5 75%);
          background-size: 400% 100%;
          animation: skeleton-loading 1.5s ease infinite;
        }
      }
    }
    
    .video-results {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 25px;
      
      .video-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        
        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 30px rgba(64, 158, 255, 0.2);
        }
        
        .thumbnail {
          height: 180px;
          position: relative;
          background-size: cover;
          background-position: center;
          
          &.thumbnail-video1 {
            background-color: #FF9A8B;
            background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
          }
          
          &.thumbnail-video2 {
            background-color: #85FFBD;
            background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
          }
          
          &.thumbnail-video3 {
            background-color: #8BC6EC;
            background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
          }
          
          &.thumbnail-video4 {
            background-color: #FFDEE9;
            background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
          }
          
          &.thumbnail-video5 {
            background-color: #FBAB7E;
            background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
          }
          
          &.thumbnail-video6 {
            background-color: #FA8BFF;
            background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
          }

          .likes {
            display: flex;
            align-items: center;
            position: absolute;
            bottom: 10px;
            left: 10px;
            // background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;

            .el-icon {
              font-size: 20px;
            }
          }
          
          .duration {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
          }
        }
        
        .video-info {
          padding: 15px;
          
          .title {
            margin: 0 0 8px;
            font-size: 16px;
            font-weight: 500;
            color: #1f2d3d;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          
          .author {
            font-size: 14px;
            color: #606266;
            margin-bottom: 5px;
          }
          
          .meta {
            font-size: 13px;
            color: #909399;
          }
        }
      }
    }
    
    .live-results {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 25px;
      
      .live-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        
        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 30px rgba(255, 77, 79, 0.15);
        }
        
        .live-thumbnail {
          height: 180px;
          position: relative;
          background-size: cover;
          background-position: center;
          
          &.live-thumb-live1 {
            background-color: #FF9A8B;
            background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
          }
          
          &.live-thumb-live2 {
            background-color: #85FFBD;
            background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
          }
          
          &.live-thumb-live3 {
            background-color: #8BC6EC;
            background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
          }
          
          &.live-thumb-live4 {
            background-color: #FFDEE9;
            background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
          }
          
          &.live-thumb-live5 {
            background-color: #FBAB7E;
            background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
          }
          
          .cover-img {
            width: 100%;
            height: 100%;
          }

          .live-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #ff4d4f;
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
          }
          
          .viewers {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
          }
        }
        
        .live-info {
          padding: 15px;
          
          .title {
            margin: 0 0 8px;
            font-size: 16px;
            font-weight: 500;
            color: #1f2d3d;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          
          .author {
            font-size: 14px;
            color: #606266;
            margin-bottom: 10px;
          }
          
          .tags {
            .el-tag {
              margin-right: 8px;
              margin-bottom: 5px;
              background-color: #f0f7ff;
              color: #409eff;
              border-color: #d9ecff;
            }
          }
        }
      }
    }
    
    .user-results {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      
      .user-card {
        display: flex;
        align-items: center;
        padding: 20px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
        }
        
        .avatar {
          position: relative;
          margin-right: 15px;
          
          .verified-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            background: white;
            border-radius: 50%;
            padding: 2px;
          }
        }
        
        .user-info {
          flex: 1;
          
          .name {
            color: black;
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
          }
          
          .followers {
            font-size: 13px;
            color: #909399;
            margin-bottom: 5px;
          }
          
          .bio {
            font-size: 14px;
            color: #606266;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
        
        .el-button {
          align-self: flex-start;
          margin-top: 5px;
        }
      }
    }
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 0;
      text-align: center;
      
      .el-icon {
        margin-bottom: 20px;
        color: #c0c4cc;
      }
      
      h3 {
        font-size: 18px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 10px;
      }
      
      p {
        font-size: 14px;
        color: #909399;
      }
    }
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@media (max-width: 768px) {
  .search-container {
    padding: 15px;
    
    .search-header {
      .search-tabs {
        :deep(.el-tabs__item) {
          padding: 0 15px;
        }
      }
    }
    
    .results-container {
      .video-results,
      .live-results,
      .user-results {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>